<template>
  <div id="CommercialTenant">

    <el-form>
      <br>
      <el-form-item label="商户名称">
        <el-input v-model="searchObj.merchantName" placeholder="请输入商户名称"></el-input>
      </el-form-item>
      <br>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          label=""
          width="50"
          prop="id">
        <template slot-scope="scope">
          <router-link :to="{path:'/commercialTenantById',query:{index:scope.row.id}}">
            <i class="el-icon-view"></i>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column
          label="ID"
          width="180"
          prop="id">
        <template slot-scope="scope">
          <router-link :to="{path:'/commercialTenantById', query:{index: scope.row.id}}">
            {{scope.row.id}}
          </router-link>
        </template>
      </el-table-column>
      <!-- 商户名称 -->
      <el-table-column
          label="商户名称"
          prop="merchantName"
          width="180">
      </el-table-column>
      <!-- 真实姓名 -->
      <el-table-column
          label="真实姓名"
          prop="name"
          width="180">
      </el-table-column>
      <!-- 身份证 -->
      <el-table-column
          label="身份证号码"
          prop="idCard"
          width="300">
      </el-table-column>
      <!-- 营业执照编号 -->
      <el-table-column
          label="商户营业执照编号"
          prop="merchantCard"
          width="300">
      </el-table-column>
      <!-- 负责人 -->
      <el-table-column
          label="商户负责人"
          prop="merchantPerson"
          width="180">
      </el-table-column>
      <!-- 联系方式 -->
      <el-table-column
          label="联系方式"
          prop="merchantNumber"
          width="180">
      </el-table-column>
      <!-- 门店地址 -->
      <el-table-column
          label="门店地址"
          prop="merchantAddr"
          width="500">
      </el-table-column>
      <!-- 是否营业 -->
      <el-table-column
          label="是否营业"
          prop="onOff"
          width="180">
        <template slot-scope="scope">
          {{ scope.row.onOff === 1 ? '营业' : '歇业' }}
        </template>
      </el-table-column>
      <!-- 申请时间 -->
      <el-table-column
          label="申请时间"
          prop="createDate"
          width="200">
        <template slot-scope="scope">
          {{ new Date(scope.row.createDate).toLocaleString() }}
        </template>
      </el-table-column>
      <!-- 商户状态 -->
      <el-table-column
          label="商户状态"
          prop="merchantStatus"
          width="180">
        <template slot-scope="scope">
          {{ scope.row.merchantStatus === 1 ? '已注销' : '未注销' }}
        </template>
      </el-table-column>
      <!-- 审核状态 -->
      <el-table-column
          label="审核状态"
          prop="userMerchantTag"
          width="180">
        <template slot-scope="scope">
          {{ scope.row.userMerchantTag === 0 ? '未审核' : scope.row.userMerchantTag === 1 ? '已审核' : '未通过' }}
        </template>
      </el-table-column>
    </el-table>

    <!-- //分页功能 -->
    <div class="block">

      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="pageSizeList"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    this.getComments()
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.getComments()
    },
    handleCurrentChange(val) {
      this.pageNo = val
      this.getComments()
    },
    search(){
      this.pageNo=1,
          this.getComments()
    },
    async getComments(){
      const {data : res} = await this.$http.post(`/merchant/querylist/${this.pageNo}/${this.pageSize}`,this.searchObj)
      this.tableData = res.rows
      this.total = res.total
      console.log(res)
    }
  },
  filters:{
    formatTimer(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    }
  },
  data() {
    return {
      tableData: [

      ],
      pageNo:1,
      pageSizeList:[2,5,10,20],
      total:0,
      pageSize:2,
      searchObj: {

      }
    }
  }
}
</script>

<style scoped>

</style>